// user-card.js
const userCardTemplate = document.createElement('template');
userCardTemplate.innerHTML = `
    <style>
        .user-card {
            background-color: #86efac20;
            color: #333;
            padding: 15px 15px;
            border: 1px solid #86efac;
            border-radius: 5px;
            font-size: 1em;
        }
    </style>
    <div class="user-card">
        <slot></slot>
    </div>
`;

class UserCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(userCardTemplate.content.cloneNode(true));
        this.shadowRoot.querySelector('.user-card').addEventListener('click', () => {
            // 派发一个自定义事件
            this.dispatchEvent(new CustomEvent('user-card-click', {
                bubbles: true, // 事件冒泡
                composed: true, // 允许事件穿透 Shadow DOM 边界
                detail: { message: '用户卡片被点击了！' } // 可以传递额外数据
            }));
        });
    }

    connectedCallback() {
        console.log('UserCard 来了！');
    }

    disconnectedCallback() {
        console.log('UserCard 走了！');
    }
}

// 导出组件定义
export { UserCard };
// 或者直接定义
// customElements.define('user-card', UserCard); // 如果你希望在模块加载时就定义
